<script setup lang="ts">
import { reactive } from "vue"; //导入 reactive 函数
//使用 reactive 定义响应式数据
const user = reactive({"time":"0分钟","bushu":"0步数","juli":"0公里"})
//事件处理函数
function updateUser(){
user.time = "58分钟";
user.bushu = "10866步";
user.juli = "6.26公里" 
console.log(user)
} </script>
<template>
<!--显示用户信息 -->
<h3>运动时长：{{ user.time }}</h3>
<h3>行走步数：{{ user.bushu }}</h3>
<h3>行动距离：{{ user.juli }}</h3>
<!--按扭操作-->
<input type="button" value="更新" @click="updateUser">
</template>
<style scoped></style>
